import React, {useEffect} from 'react';
import {styled} from '@mui/material/styles';
import './SearchPage.css'
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import {Link} from "react-router-dom";
import PubSub from "pubsub-js";

const StyledTabs = styled((props) => (
    <Tabs
        {...props}
        TabIndicatorProps={{ children: <span className="MuiTabs-indicatorSpan" /> }}
    />
))({
    '& .MuiTabs-indicator': {
        display: 'flex',
        justifyContent: 'center',
        backgroundColor: 'transparent',
    },
    '& .MuiTabs-indicatorSpan': {
        maxWidth: 40,
        width: '100%',
        backgroundColor: '#ff0202',
    },
});

const StyledTab = styled((props) => <Tab disableRipple {...props} />)(
    ({ theme }) => ({
        textTransform: 'none',
        fontWeight: theme.typography.fontWeightBold,
        fontSize: theme.typography.pxToRem(15),
        marginRight: theme.spacing(1),
        color: 'rgba(0,0,0,0.74)',
        '&.Mui-selected': {
            color: '#ff0202',
        },
        '&.Mui-focusVisible': {
            backgroundColor: 'rgba(100, 95, 228, 0.32)',
        },
    }),
);
export default function PlayList(props){

    const [value, setValue] = React.useState("歌曲");

    const handleChange = (event, newValue) => {
        setValue(newValue);
    };
    function initValue(msg,data){
        setValue('歌曲');
    }
    useEffect(async () => {

        PubSub.subscribe('changSearchTopBar',initValue);

    },[])
    return (

            <StyledTabs
                value={value}
                onChange={handleChange}
                aria-label="styled tabs example"
            >
                <StyledTab value="歌曲" label="歌曲" to="/search/songs" component={Link}/>
                <StyledTab value="歌手" label="歌手" to="/search/singers" component={Link}/>
                <StyledTab value="歌单" label="歌单" to="/search/playlists" component={Link}/>
                <StyledTab value="专辑" label="专辑" to="/search/album" component={Link}/>
            </StyledTabs>

    );


}